<template>
  <div>
    <div class="detailList" @click="pushLink">
      <div class="imgBox">
        <img :src="detailList.img" alt />
        <div class="iconfont">
          <span class="video iconicon-test1">536万</span>
          <span class="comment iconicon-test">6666</span>
        </div>
      </div>

      <p>{{ detailList.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: ['detailList'],
  created() {},
  methods: {
    pushLink() {
      if (this.$route.path !== '/article/' + this.detailList.id) {
        this.$router.push('/article/' + this.detailList.id)
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.detailList {
  padding: 2.222vw 1.389vw;
}

.detailList img {
  width: 100%;
  height: 100%;
  border-radius: 0.533vw;
}

.detailList p {
  height: 6.944vw;
  font-size: 3.333vw;
  margin-top: 1.944vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.imgBox {
  position: relative;
  border-radius: 0.53333vw;
  overflow: hidden;
}

.iconfont {
  font-size: 3.333vw;
}

.video, .comment {
  position: absolute;
  bottom: 1.389vw;
  color: red;
}

.video {
  left: 1.667vw;
}

.comment {
  right: 1.667vw;
}
</style>
